<script setup lang="ts">
import { initRouter } from "@/router/utils";
import { storageLocal } from "@pureadmin/utils";
import { type CSSProperties, ref, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";

defineOptions({
    name: "PermissionPage"
});

const elStyle = computed((): CSSProperties => {
    return {
        width: "85vw",
        justifyContent: "start"
    };
});

const username = ref(useUserStoreHook()?.username);

const options = [
    {
        value: "admin",
        label: "管理员角色"
    },
    {
        value: "common",
        label: "普通角色"
    }
];

function onChange() {
    useUserStoreHook()
        .loginByUsername({ username: username.value, password: "admin123" })
        .then(res => {
            if (res.success) {
                storageLocal().removeItem("async-routes");
                usePermissionStoreHook().clearAllCachePage();
                initRouter();
            }
        });
}
</script>

<template>
    <div>
        <p class="mb-2!">
            模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
        </p>
        <el-card shadow="never" :style="elStyle">
            <template #header>
                <div class="card-header">
                    <span>当前角色：{{ username }}</span>
                </div>
            </template>
            <el-select v-model="username" class="w-[160px]!" @change="onChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-card>
    </div>
</template>
